import React, { Component } from 'react';
import { NavBar, Icon, ListView } from 'antd-mobile';
import axios from 'axios';
import style from './index.module.scss'
// import { Player } from 'video-react';
import "./../../../node_modules/video-react/dist/video-react.css";
import ReactPlayer from 'react-player'

class Com extends Component {
  constructor(props){
    super(props)
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
  });
    this.state={
      videolist: {},
      videodetail: [],
      loves: [],
      author: {},
      col: false,
      dataSource,
      datas:[],
      pageIndex:1,
      isLoading: true,
      useBodyScroll: false,
      dataBlobs: {},
      sectionIDs:[],
      rowIDs:[],
      dataArr:[]
    }
  }
  
componentDidMount(){
  axios.get('http://rap2.taobao.org:38080/app/mock/244731/api/video').then(res=>{
      console.log(res)
      this.setState({
        videolist: res.data.data,
        videodetail: res.data.data.videos
      })
    })
    // 包含评论的接口
    axios.get(`http://rap2.taobao.org:38080/app/mock/244731/api/traveldetail?travelid=${this.state.travelid}`).then(res=>{
      console.log(res)
      this.setState({
        answer: res.data.data.answer,
        author: res.data.data.author
      })
    })

    this.genData(true);
}

genData(ref=false) {
  //获取数据
  let that=this;
  axios.get(`http://rap2.taobao.org:38080/app/mock/244731/api/traveldetail?travelid=${this.state.travelid}`).then(function (res){
      if(res.data.code==='200')
      {
          const lg = res.data.data.answer.length;
          // console.log(lg)
          let dataArr = that.state.dataArr;//关键代码
          let m=that.state.datas;
          for (let i = 0; i < lg; i++) {
              //每一次读取的数据都进行保存一次
              dataArr.push(`row - ${(that.state.pageIndex * lg) + i}`);
              m.push(res.data.data.answer[i])
          }
          // console.log('1111',dataArr)
          // console.log('22222',m)
          if(ref){
              //这里表示刷新使用
              that.setState({
                  datas:res.data.data.answer,
                  pageIndex:that.state.pageIndex+1,
                  dataSource: that.state.dataSource.cloneWithRows(dataArr),
                  isLoading: false,
                  //保存数据进state
                  dataArr:dataArr
              });
          }else{
              //这里表示上拉加载更多
              that.rData = { ...that.rData, ...dataArr };
              console.log(that.rData)
              that.setState({
                  datas:m,
                  pageIndex:that.state.pageIndex+1,
                  dataSource: that.state.dataSource.cloneWithRows(that.rData),
                  isLoading: false,
                  //保存数据进state
                  dataArr:dataArr
              });
          }
      }
  });
}

onEndReached = (event) => {
  if (this.state.isLoading && !this.state.hasMore) {
      return;
  }
  this.setState({ isLoading: true,pageIndex:this.state.pageIndex+1 });
  let that=this;
  setTimeout(() => {
      that.genData(false);
  }, 1000);
}

  render() {

    const separator = (sectionID, rowID) => (
      <div
          key={`${sectionID}-${rowID}`}
          style={{
              backgroundColor: '#F5F5F9',
              height: 8,
              borderTop: '1px solid #ECECED',
              borderBottom: '1px solid #ECECED',
          }}
      />
  );
  let index = this.state.datas.length - 1;
  const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
          index = this.state.datas.length - 1;
      }
      const obj = this.state.datas[index--];
      return (
          <div key={rowID}
               style={{
                   padding: '0 0.15rem',
                   backgroundColor: '#fff',
                   height:'auto',
                   display: 'flex',
                   alignItems:'center',
                   position: 'relative'
               }}
          >
              <img src={obj.avatar} alt="" style={{width: '0.38rem', height: '0.36rem', marginRight: '0.15rem'}}/>
              <div>
                  <p style={{width: '1.75rem'}}>{obj.username}</p>
                  <p className={style.answerDesc} style={{width: '1.82rem'}}>{obj.desc}</p>
              </div>
              <span className='iconfont icon-iconfontzhizuobiaozhun44' style={{
                fontSize: '0.18rem',
                position: 'absolute',
                right: '0.15rem',
                top: '0.18rem',
                color: '#00B145'
              }}></span>
              <span style={{
                fontSize: '0.15rem',
                position: 'absolute',
                right: '0.20rem',
                top: '0.36rem',
                color: '#00B145'}}>8</span>
          </div>
      );
  }

    return (
      <div className='box'>
         {/* 头部 */}
         <header className='header'>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="ellipsis" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >{this.state.videolist.title}
          </NavBar>
        </header>
        <div className="content">
          {/* 视频自动播放 */}
          <div style={{width: '100%', height: '1.4rem'}}>
            {/* <Player fluid={false} width='365' height='140' ref="player" videoId="video-1">
              <source src='/video/1.qlv' style={{ height: '1.4rem'}}/>
            </Player> */}
            <ReactPlayer url='https://media.w3.org/2010/05/sintel/trailer_hd.mp4' controls pip={true} width='100%' height={140} playing />
          </div>
  
          {/* 标题 */}
          <div style={{padding: '0 0.15rem'}}>
            <p style={{fontWeight:'bold',fontSize: '0.13rem', marginBottom:'0.1rem'}}>{this.state.videolist.title}在这里</p>
            <p style={{width: '2.65rem', height:'auto', lineHeight: '0.16rem', fontSize: '0.12rem'}}>{this.state.videolist.desc}</p>
          </div>
          {/* 作者头像 */}
          <div className={style.avatar}>
            <img src={this.state.videolist.banner} alt=""/>
              <div>
                <p>{this.state.videolist.name}</p>
                <span>{this.state.videolist.desc}</span>
              </div>   
          </div>
          {/* 选集 */}
          <p className={style.subject} >选集</p>
          <div className={style.docs} style={{marginBottom: '0.41rem'}}>
            {
              this.state.videodetail.map(item => {
                return <div className={style.video} key={item.videoid}>
                    <div style={{position: 'relative'}}>
                      <img style={{width: '1.48rem',height: '0.83rem',boxSizing: 'border-box',border: '1px'}} src={item.src} alt="" />
                      <img className={style.time} src={item.time} alt="" />
                    </div>
                    <p>{item.detail}</p>
                  </div>
              })
            }
          </div>
          {/* 评论区域 */}
          <p style={{padding: '0 0 0.15rem 0.15rem',fontWeight:'bold',color:'rgba(51,51,51,1)' ,fontSize: '0.14rem'}}>回复</p>
          <div className={style.answer}>
            {/* 此处应为当前用户得头像 */}
            <img src={this.state.author.avatar} alt=""/>
            <input type="text" placeholder='和大家分享你的想法'/>
          </div>
          <ListView
                key={this.state.useBodyScroll ? '0' : '1'}
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll
                style={this.state.useBodyScroll ? {} : {
                    border: '1px solid #ddd',
                    margin: '5px 0'
                }}
                // pullToRefresh={<PullToRefresh
                //     refreshing={this.state.refreshing}
                //     onRefresh={this.onRefresh}
                // />}
                onEndReachedThreshold={1000}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>
      </div>
    );
  }
}

export default Com
